<template>
  <nav class="navigation"> 
    <div class="logo">
      <img :src="logoUrl" alt="logo" class="logo-img">
      <div class="title">&nbsp;Train System</div>
    </div>
    <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
    >
      <a-sub-menu key="dashboard">
        <template v-slot:title>
          <span><DashboardOutlined style="fontSize: 18px" /><span>YOLOv5</span></span>
        </template>
        <a-menu-item key="yolov_detect" @click="routerToYolovDetect()">
          目标检测
        </a-menu-item>
        <a-menu-item key="yolov_train" @click="routerToYolovTrain()">
          权重训练
        </a-menu-item>
        <a-menu-item key="yolov_view" @click="routerToYolovView()">
          损失和性能
        </a-menu-item>
        <a-menu-item key="weight" @click="routerToWeight()">
          权重管理
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="label-image">
        <template v-slot:title>
          <span><AppstoreOutlined style="fontSize: 18px" /><span>LabelImage</span></span>
        </template>
        <a-menu-item key="annotate" @click="routerToAnnotate()">图片标注</a-menu-item>
        <a-menu-item key="dataset" @click="routerToDataset()">数据集管理</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </nav>
</template>
    
<script>
import logoUrl from '@/assets/img/logo.png'
import { DashboardOutlined, AppstoreOutlined } from '@ant-design/icons-vue';

export default {
  components: {
    DashboardOutlined,
    AppstoreOutlined,
  },
  data() {
    return {
      logoUrl: logoUrl, 
      selectedKeys: ['yolov_detect'],
      openKeys: ['dashboard'],
    };
  },
  watch: {
    openKeys(val) {
      // console.log('openKeys', val);
    },
  },
  methods: {
    // click to change content page. 
    routerToYolovDetect() {
      this.$router.push('/yolov_detect');
    },
    routerToYolovTrain() {
      this.$router.push('/yolov_train');
    },
    routerToYolovView() {
      this.$router.push('/yolov_view')
    },
    routerToYolovLog() {
      this.$router.push('/yolov_log');
    },
    routerToDataset() {
      this.$router.push('/dataset')
    },
    routerToAnnotate() {
      this.$router.push('/annotate')
    },
    routerToWeight() {
      this.$router.push('/weight')
    },
  },
};
</script>

<style scoped>
  .navigation {
    width: 100%;
  }

  .logo {
    padding: 7px 22px;
    background-color: #3498db;
    height: 50px;
  }

  .logo > .logo-img {
    height: 36px;
    width: 36px;
    border-radius: 18px;
  }

  .logo > .title {
    display: inline-block;
    vertical-align: top;
    line-height: 36px;
    color: #fff;
    font-size: 18px;
  }

  /deep/ .ant-menu-sub.ant-menu-inline > .ant-menu-item {
    font-size: 13px; 
  }
</style>